<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="showCreateModal">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
      class="break-all"
    >
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper'">
          <a-button class="mr-1 mb-1" type="primary" @click="showUpdateModal(record)">{{ t("common.edit") }}</a-button>
          <a-button class="mr-1 mb-1" danger type="primary" @click="deleteRecord(record)">{{
            t("common.delete")
          }}</a-button>
          <a-button type="primary" @click="toggleLine(record)">{{
            record.status ? t("common.doOffline") : t("common.doOnline")
          }}</a-button>
        </div>
        <a-image
          v-else-if="column.key === 'icon'"
          :src="record.icon"
          :width="100"
          :height="100"
          :fallback="DEFAULT_IMG_BASE64_STR"
        />
      </template>
    </a-table>
    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="modalOk">
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="专栏名称" v-bind="validateInfos.specialColumnName">
          <a-input v-model:value="modelRef.specialColumnName" />
        </a-form-item>
        <a-form-item label="专栏图标" v-bind="validateInfos.icon">
          <CommonUpload v-model:fileUrl="modelRef.icon" />
        </a-form-item>
        <a-form-item label="权重" v-bind="validateInfos.specialColumnWeight">
          <a-input-number v-model:value="modelRef.specialColumnWeight" :min="1" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { Api, SpecialColumn } from "/@/api/manage/officialContent";
import { useCURD } from "/@/hooks/web/useCURD";
import { toggleLineByStatus } from "/@/components/business";
import CommonUpload from "/@/components/CommonUpload.vue";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";

const { t } = useI18n();
const columns = [
  {
    title: "专栏ID",
    dataIndex: "id",
  },
  {
    title: "专栏名称",
    dataIndex: "specialColumnName",
  },
  {
    title: "图标",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "权重",
    dataIndex: "specialColumnWeight",
  },
  {
    title: "状态",
    dataIndex: "status",
    customRender({ text }: any) {
      return text ? t("common.online") : t("common.offline");
    },
  },
  {
    title: "操作",
    dataIndex: "oper",
    key: "oper",
  },
];
const modelRef = reactive<SpecialColumn>({
  specialColumnName: "",
  specialColumnWeight: 1,
  icon: "",
});
const {
  modalVisible,
  modalTitle,
  validateInfos,
  showCreateModal,
  showUpdateModal,
  modalOk,
  deleteRecord,
  pagination,
  tableLoading,
  tableData,
  reloadTable,
  curd,
} = useCURD<SpecialColumn, any>({
  isPagination: true,
  createTitle: "新增专栏",
  updateTitle: "编辑专栏",
  deleteMessage: "确认删除该专栏吗？",
  modelRef,
  fieldRules: ["specialColumnName", "specialColumnWeight", "icon"],
  cudUrl: Api.specialColumns,
  getPageUrl: Api.specialColumns,
  onBeforeOk(data, isCreate) {
    if (isCreate) {
      data.status = 0;
    } else {
      data.status = 1;
      // delete data.status;
    }
  },
});
onMounted(async () => {
  await reloadTable();
});
function toggleLine(record: SpecialColumn) {
  toggleLineByStatus({
    record,
    curd,
    reloadTable,
    tableLoading,
  });
}
</script>
